<template>
  <view class="personal-container">
    <!-- 用户信息区 -->
    <view class="user-info">
      <image class="avatar" src="/static/tupian.jpg" mode="aspectFill"></image>
      <view class="user-detail">
        <text class="username">田凯文</text>
        <text class="user-id">ID:122512023056</text>
      </view>
      <button class="edit-btn" @click="editProfile">编辑资料</button>
    </view>

    <!-- 功能入口 -->
    <view class="function-grid">
      <view class="function-item" @click="gotoPage('history')">
        <image class="func-icon" src="/static/history.png" mode="widthFix"></image>
        <text class="func-text">浏览历史</text>
      </view>
      <view class="function-item" @click="gotoPage('collection')">
        <image class="func-icon" src="/static/shoucang.png" mode="widthFix"></image>
        <text class="func-text">我的收藏</text>
      </view>
      <view class="function-item" @click="gotoPage('setting')">
        <image class="func-icon" src="/static/shezhi.png" mode="widthFix"></image>
        <text class="func-text">设置</text>
      </view>
    </view>

    <!-- 退出登录 -->
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  methods: {
    editProfile() {
      uni.navigateTo({ url: '' });
    },
    gotoPage(page) {
      uni.showToast({ title: `进入${page}页面`, icon: 'none' });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.clearStorageSync();
            uni.redirectTo({ url: '/pages/denglu/denglu' });
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.personal-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 用户信息区 */
.user-info {
  display: flex;
  align-items: center;
  padding: 30rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 6rpx solid rgba(255, 255, 255, 0.5);
}

.user-detail {
  flex: 1;
  margin-left: 30rpx;
}

.username {
  font-size: 36rpx;
  display: block;
  margin-bottom: 10rpx;
}

.user-id {
  font-size: 28rpx;
  opacity: 0.8;
}

.edit-btn {
  padding: 20rpx 30rpx;
  border: 2rpx solid #fff;
  border-radius: 40rpx;
  background: transparent;
  color: #fff;
  font-size: 28rpx;
}

/* 功能网格 */
.function-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  margin: 20rpx;
  border-radius: 20rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
}

.func-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 15rpx;
}

.icon-wrapper {
  position: relative;
}

.badge {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  background-color: #ff4444;
  color: #fff;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
}

.func-text {
  font-size: 28rpx;
  color: #333;
}

/* 退出登录按钮 */
.logout-btn {
  width: calc(100% - 40rpx);
  margin: 20rpx;
  padding: 30rpx;
  background-color: #fff;
  border: 2rpx solid #ff4444;
  border-radius: 10rpx;
  color: #ff4444;
  font-size: 32rpx;
}
</style>